<!--suppress ALL -->
<include file="./Template/header.html" />

<link rel="stylesheet" type="text/css" href="/Template/css/teamListDefault.css">
<script type="text/javascript" src="/Template/js/amazeui.js"></script>
<script type="text/javascript">

	$(function() {

		//初始化页面配置
		document.title = "团队列表";

		var app = new Vue({
			el: '#container',
			data: {
				groupList: [],
			},
			methods: {
				index: indexPage,
				order: orderPage,
				rank: rankPage,
				center: centerPage,
				jump: function(url) {
					window.location.href = url;
				},
			}
		})

		$('.am-slider').flexslider({
			animationLoop: false,
		});

		var demo = document.getElementById("demo");
		var demo1 = document.getElementById("demo1");
		var demo2 = document.getElementById("demo2");
		$('#demo1 ul li').each(function(){
			$(this).css('min-width',screen.width);
		})
		demo2.innerHTML=document.getElementById("demo1").innerHTML;
		function Marquee(){
			if(demo.scrollLeft-demo2.offsetWidth>=0){
				demo.scrollLeft-=demo1.offsetWidth;
			}
			else{
				demo.scrollLeft++;
			}
		}
		var myvar=setInterval(Marquee,30);

		function bindCountDown() {
			var endtime = $(".deadline-time").attr("endtime");
			setInterval(function() {

				//var endTime = new Date(endtime.replace(/-/g,"/"));
				var ua = navigator.userAgent.toLowerCase();	
				if (/iphone|ipad|ipod/.test(ua)) {
					var endTime = safariDate(endtime);	
				} else if (/android/.test(ua)) {
					var endTime = new Date(endtime.replace(/-/g,","));		
				}
				var timeGap = getTimeGap(new Date(), endTime, "hours");

				if (timeGap["hours"] == undefined || timeGap["minutes"] == undefined || timeGap["seconds"] == undefined) {
					$(".deadline-time p").html("00:00:00");
				}else{
					$(".deadline-time p").html(
						timeGap["hours"]+":"+
						timeGap["minutes"]+":"+
						timeGap["seconds"]);
				}

			}, 1000);
		}

		function bindProgress() {

			var total = "{$product.price}";
			var join = "{$round.join_number}";

			var proportion = parseFloat(join/total);
			var progressImg = $(".progress-img").width();
			var progressImgRed = $(".progress-img-red").width(progressImg*proportion);
			$('.progress-img-red').css('width',progressImgRed);

		}

		var pageNum = 2;
		var isNeedRefresh = false;

		$(window).scroll(function(){

			var scrollTop = $(this).scrollTop();
			var scrollHeight = $(document).height();
			var windowHeight = $(this).height();
			if(!isNeedRefresh &&
					(scrollHeight - scrollTop - windowHeight <= 25)){
				isNeedRefresh = true;
				refreshPage(pageNum++);
			}
		});

		function refreshPage(pageNum) {
			$.ajax({
				url:"/wechat/product/waitingList",
				type:"post",
				data:{
					id: '{$product.product_id}',
					pageNum: pageNum
				},
				dataType:"JSON",
				beforeSend:function(){
					$("#loadingToast").show();
				},
				complete:function(){
					$('#loadingToast').hide();
				},
				success:function(data){
					if(data.code != 200) {
						alert(data.msg);
						window.location.href = "/wechat/index/index";
					} else {
						if(!isNullOrEmpty(data.group_list)) {
							if(pageNum == 2){
								app.groupList = data.group_list;
							} else {
								app.groupList = app.groupList.concat(data.group_list);
							}
							isNeedRefresh = false;
						}
					}
				},
			})
		}

		function initPage() {
			$.ajax({
				url:"/wechat/product/waitingList",
				type:"post",
				data:{
					id: '{$product.product_id}',
					pageNum: 1
				},
				dataType:"JSON",
				beforeSend:function(){
					$("#loadingToast").show();
				},
				complete:function(){
					$('#loadingToast').hide();
				},
				success:function(data){
					if(data.code != 200) {
						alert(data.msg);
						window.location.href = "/wechat/index/index";
					} else {
						app.groupList = data.group_list;
					}
				},
			})
		}

		bindCountDown();
		bindProgress();
		initPage();

	});

	function waitingPage(id) {
		window.location.href = "/wechat/product/waitingGroup/id/" + id;
	}

	function winPage(id) {
		window.location.href = "/wechat/product/winGroup/id/" + id;
	}

	function failurePage(id) {
		window.location.href = "/wechat/product/failureGroup/id/" + id;
	}

	function join(id) {
		window.location.href = "/wechat/product/share/id/" + id;
	}

</script>
<div class="index">
	<div class="nav-img">
		<div class="am-slider am-slider-default" id="demo-slider-0">
			<ul class="am-slides nav-img-ul">
				<foreach name="bannerList" item="vo">
					<li v-on:click="jump('{$vo.target_url}')">
						<img src="{$vo.image_url}">
					</li>
				</foreach>
			</ul>
		</div>
		<div class="user-pay">
			<div class="user-pay-content">
				<div class="user-img"></div>
				<div class="user-name"></div>
				<div class="pay-text">刚刚下单</div>
				<p class="pay-time"></p>
			</div>
		</div>
	</div>
	<div id="demo" class="qimo8">
		<div class="qimo">
		    <div id="demo1">
		        <ul>
					<foreach name="announcementList" item="vo">
						<li>
							<a href="javascript:void(0)">{$vo.content}</a>
						</li>
					</foreach>
			    </ul>
		    </div>
		    <div id="demo2"></div>
	    </div>
	</div>
	<div class="goods-details">
		<div class="deadline-time" endtime="{$product.end_time}">
			<p>00:00:00</p>
		</div>
		<div class="goods-img" style="background: url('{$product.image}')no-repeat center;background-size: cover;"></div>
		<div class="goods-title">{$product.product_name}</div>
		<span class="progress color-99">进度</span>
		<div class="progress-img"></div>
		<div class="progress-img-red"></div>
		<div class="the-goods-red">总需{$product.price} | 本轮还需{$round.left_number}</div>
		<!-- <div class="goods-title">{$product.product_name}</div>
		<span class="progress color-99">进度</span>
		<div class="progress-img"></div>
		<div class="progress-img-red"></div>
		<div class="goods-price color-font">￥{$product.price}</div>
		<div class="remain-price color-99">(剩余<span class="color-font">{$round.left_number}</span>份)</div>
		<div class="now-price color-pink">￥{$round.join_number}</div> -->
	</div>
	<div class="team-title">
		<div class="ongoing active" onclick="waitingPage('{$round.round_id}')"><span>进行中</span></div>
		<div class="success" onclick="winPage('{$round.round_id}')"><span>团胜记录</span></div>
		<div class="failure" onclick="failurePage('{$round.round_id}')"><span>团灭记录</span></div>
	</div>
	<div class="team">
		<div class="has-no-order" v-if="groupList == null">暂无记录</div>
		<div class="team-list" onclick="join('{{group.group_id}}')" v-for="group in groupList">
			<div class="header-info">
				<div class="head-img-url-zone">
					<div class="head-img-url" v-bind:class="{leader:member.is_leader == 1}" v-for="member in group.member_list" style="background:url('{{member.headimgurl}}')no-repeat center;background-size: cover;"></div>
				</div>
				<div class="other-info" style="clear:both;">
					<div class="other-info-padding">
						<p class="join-count"><span>{{group.nickname}}的团</span></p>
						<p class="join-num">目前团员人数 <span>{{group.member_number}}人</span></p>
						<p class="join-count">全团持有 <span>{{group.buy_number}}</span></p>
					</div>
					<div class="line"></div>
					<div class="join-team-btn">
						<p>立即参团</p>
					</div>
				</div>
			</div>
		</div>
		<!-- <div class="team-list" v-for="group in groupList">
			<div class="header-info">
				<div class="header-img-border"></div>
				<div class="header-img" style="background:url('{{group.headimgurl}}')no-repeat center;background-size: cover;"></div>
				<div class="header-title color-font">
					<span class="color-99">团长</span>
					<p>{{group.nickname}}</p>
				</div>
				<div class="join-team-btn" onclick="join('{{group.group_id}}')">
					<p>立即参团</p>
				</div>
				<div class="other-info">
					<div class="other-info-padding">
						<p class="join-num">目前团员人数 <span>{{group.member_number}}人</span></p>
						<p class="join-count">全员已购买 <span>{{group.buy_number}}份</span></p>
					</div>
					<div class="line"></div>
					<div class="join-person">
						<div class="join-person-img" v-for="customer in group.member_list"
							 style="background:url('{{customer.headimgurl}}')no-repeat center;background-size: cover;"></div>
					</div>
				</div>
			</div>
		</div> -->
	</div>
</div>
<include file="./Template/footer.html" />